﻿<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>HTML5 Blog</title>
    <link href="../css/html5reset.css" rel="stylesheet" type="text/css" />
    <link href="../css/style.css" rel="stylesheet" type="text/css" />
    <link href="../css/main.css" rel="stylesheet" type="text/css" />
    <!--[if lt IE 9]>
<script src="html5.js"></script>
<![endif]-->
</head>
<body>
    <header>
        <hgroup>
            <h1>
                Blog Header</h1>
            <h2>
                Blog Sub Heading</h2>
        </hgroup>
    </header>
    <nav>
        <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Projects</a></li>
            <li><a href="#">Portfolio</a></li>
            <li><a href="#">Profile</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
    <article>
        <header>
            <h1>
                Article Heading</h1>
            <time datetime="2010-05-05" pubdate>May 5th, 2010</time>
        </header>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
        
            <header>
                <h1>
                    Section Heading</h1>
            </header>
            <p style="margin-top: 0px; color: rgb(34, 34, 34); font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 19px; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); ">
                <a id="vgz:" href="http://dev.w3.org/html5/md/" 
                    style="color: rgb(102, 17, 204); " title="HTML5 微数据规范">HTML5 微数据规范</a>是一种标记内容以描述特定类型的信息，例如评论、人物信息或事件。每种信息都描述特定类型的项，例如人物、事件或评论。例如，事件可以包含 
                venue、starting time、name 和 category 属性。</p>
    <p style="color: rgb(34, 34, 34); font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 19px; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); ">
        微数据使用 HTML 标记（常为<span class="Apple-converted-space">&nbsp;</span><code 
            style="font-size: 1.2em; ">&lt;span&gt;</code><span class="Apple-converted-space">&nbsp;</span>或<span 
            class="Apple-converted-space">&nbsp;</span><code style="font-size: 1.2em; ">&lt;div&gt;</code>）中的简单属性为项和属性指定简要的描述性名称。</p>

<div>
  我的名字是王富强，但大家叫我小强。我的个人首页是：
  <a href="http://www.example.com">www.example.com</a>
  我住在上海市富贵新村。我是工程师，目前在财富科技公司上班。
</div>
<br />
<div itemscope itemtype="http://data-vocabulary.org/Person">
   我的名字是<span itemprop="name">王富强</span>，
   但大家叫我<span itemprop="nickname">小强</span>。
   我的个人首页是：
   <a href="http://www.example.com" itemprop="url">www.example.com</a>。
   我住在
   <span itemprop="address" itemscope
      itemtype="http://data-vocabulary.org/Address">
      <span itemprop="region">上海市</span>
      <span itemprop="locality">富贵新村</span>。
   </span>
   我是<span itemprop="title">工程师</span>，
   目前在<span itemprop="affiliation">财富科技公司</span>上班。
</div>
<a href="http://support.google.com/webmasters/bin/answer.py?hl=zh-Hans&answer=176035">关于微数据</a>

        <footer>
                <p>
                    Section Footer: Pellentesque volutpat, leo nec auctor euismod</p>
            </footer>
        <br />
        <footer>
Article Footer
</footer>
</article>   
  
    <aside>
        <header>
            <h1 class="titleshadow">侧边栏</h1>
        </header>
        <p class="corner">
            Ut sapien enim, porttitor id feugiat non, ultrices non odio.</p>
    </aside>  
    
    <article>
    <div class="corner" >Chrome、Firefox 和 Safari 实现圆角</div>
    <div class="corner">
    <p>
        其中 -moz-border-radius 是 Firefox 实现圆角的私有属性，而 -webkit-border-radius 是 webkit 内核浏览器（如 Safari 和 Chrome）实现圆角的私有属性，如果你只要指定某一个角是圆角的话，它们都分别定义了四个属性：
</p><p>
-moz-border-radius-topleft / -webkit-border-top-left-radius<br />
-moz-border-radius-topright / -webkit-border-top-right-radius<br />
-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius<br />
-moz-border-radius-bottomright / -webkit-border-bottom-right-radius<br />
</p>
<p style=" text-align:center">
Name:<input type="text" class="roundedCorners" /><br />
PWD:<input type="password" class="roundedCorners" /><br />
<input type="button" class="roundedCorners" value="Submit" />
</p>
    </div>
    <canvas id="mycanvas"></canvas>
    </article>
    <section class="bar"></section>
    <footer>
Page Footer
</footer>

  
</body>
</html>
<script>
    if (window.webkitNotifications.checkPermission() == 0) {
        var title = '桌面通知时HTML5的独门秘籍',
        text = 'GTalk桌面通知，什么值得买桌面推送 '+Math.round(Math.random()*10000);
        window.webkitNotifications.createNotification("../img/twitter.png", title, text).show();
    }
    draw();
    function draw() {
        var canvas = document.getElementById('mycanvas');
        if (canvas.getContext) {
            var ctx = canvas.getContext('2d');
            // Draw Rectangle
            ctx.fillStyle = "rgb(255,0,0)";
            ctx.fillRect(10, 10, 250, 500);
            
        }
    }
</script>
